<template>
    <div class="userdetail">
      <div>
        <div class="user_img">
          <img :src="userinfo.user_img" alt v-if="userinfo.user_img">
          <img  src="../../images/userimg.jpg" alt v-else />
        </div>
        <div class="user_edit">
          <div>
            <p>
              <span>0</span><span class="text_color">粉丝</span>
            </p>
            <p>
              <span>99</span><span class="text_color">关注</span>
            </p>
            <p>
              <span>100</span><span class="text_color">获赞</span>
            </p>
          </div>
          <div>
            <div class="bianjiinfo" @click="$router.push('/edit')">编辑资料</div>
          </div>
        </div>
      </div>
      <div class="text_name">
        <p>{{userinfo.name}}</p>
        <div class="test">
          <span v-if="userinfo.user_desc">{{userinfo.user_desc}}</span>
          <span v-else>这个人很神秘，什么都没有写</span>
          <span>展开</span>
        </div>
      </div>
    </div>
</template>

<script>
    export default {
      props:['userinfo'],
        name: "userDetail",
        data() {
            return {}
        },
        methods: {}
    }
</script>

<style scoped lang="less">
  p{
    background-color: white;
  }
  .userdetail{
    background-color: white;
    padding: 0 12px;
    >div:nth-child(1){
      display: flex;
    }
    .user_img{
      flex: 2;
      img{
        background-color: red;
        width: 23vw;
        height: 23vw;
        border-radius: 50%;
        margin-top: -2.5vw;
      }
    }
    .user_edit p{
      background-color: white;
    }
    .user_edit{

      .text_color{
        color: #9b9b9b;
        font-weight: normal;
      }
      >div:nth-child(1){
        margin-top: 3vw;
        margin-bottom: 1vw;
      }
      flex: 3;
      div:nth-child(1){
        display: flex;
      }
      p:nth-child(1),p:nth-child(2){
        border-right: 0.1vw solid #aaaaaa;
      }
      p{
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        font-size: 3vw;
        font-weight: bold;
      }
      .bianjiinfo{
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid #fb7299;
        color: #fb7299 ;
        border-radius: 1vw;
        height: 8vw;
        margin-top: 3vw;
      }
    }
  }
  .text_name{
    margin-top: 5vw;
    p:nth-child(1){
      font-size: 5vw;
    }
    div:nth-child(2){
      margin-top: 3.5vw;
      display: flex;
      span:nth-child(1){
        flex: 1;
        font-size: 3.5vw;
        color: #aaaaaa;
      }
      span:nth-child(2){
        color: #1389bf;
        font-size: 3.5vw;
        cursor: pointer;
      }

    }
  }
</style>
